[코담]
웹개발·실전 프로젝트·AI까지, 파이썬·장고의 모든것을 담아낸 강의와 개발 노트
02 Todo 앱 UI 구조 설명 | ✅저자: 이유정(박사)
🎨 2. Todo 앱 UI 구조 설명 (templates/include)
📁 todo 앱 디렉토리 구조
todo/
│
├── __pycache__/ # 파이썬 캐시 파일
├── migrations/ # 마이그레이션 파일 (DB 스키마 관리)
│
├── templates/
│ └── todo/
│ ├── include/ # 공통 include 템플릿 폴더
│ ├── base.html # 기본 레이아웃 템플릿
│ ├── head.html # <head> 태그 관련 HTML 분리
│ ├── header.html # 일반 헤더
│ ├── header-account.html # 로그인/계정 관련 헤더
│ ├── footer.html # 공통 푸터
│ ├── todo_create.html # 할 일 생성 페이지
│ ├── todo_detail.html # 할 일 상세 페이지
│ ├── todo_list.html # 할 일 목록 페이지
│ └── todo_update.html # 할 일 수정 페이지
│
├── __init__.py # 패키지 초기화
├── admin.py # Django 관리자 페이지 설정
├── apps.py # 앱 구성 정보
├── form.py # 폼 클래스 정의 (Form, ModelForm 등)
├── models.py # DB 모델 정의 (ToDo 모델 등)
├── tests.py # 테스트 코드
├── urls.py # URL 라우팅 정의
└── views.py # 뷰 함수/클래스 정의
📁 todo 앱 디렉토리 구조
base.html
<!DOCTYPE html>
<html lang="ko">
<head>
<title>{% block title %}Todo App{% endblock %}</title>
{% include "todo/include/head.html" %}
{% block css %}{% endblock %}
</head>
<body class="bg-gray-50 text-gray-800 font-sans">
{% include "todo/include/header.html" %}
<div class="min-h-screen flex flex-col items-center justify-start px-4 py-6">
<h1 class="text-4xl font-bold mb-8 text-center text-gray-600">✨ 나의 할일 </h1>
{% block content %}{% endblock %}
</div>
{% include "todo/include/footer.html" %}
{% block extra_js %}{% endblock %}
</body>
</html>
핵심 포인트
- 전체 레이아웃 담당 (헤더 + 콘텐츠 + 푸터)
- TailwindCSS 클래스 조합으로 반응형 + 모던 UI 설계
head.html
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="{% static 'css/output.css' %}" />
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
</head>
- head.html은
<head>안에서 불러오며 TailwindCSS 링크 포함
header.html
<header class="bg-white shadow-md">
<div class="container mx-auto px-4 py-4 flex justify-between items-center">
<a href="/" class="text-2xl font-bold text-neutral-800">Django Todo App</a>
<nav class="space-x-6">
<div class="absolute top-4 right-6 flex space-x-3">
<a href="https://codam.kr"
class="text-sm text-neutral-500 font-bold hover:text-neutral-800 transition-colors flex flex-row items-center
space-x-2 "
target="_blank" rel="noopener noreferrer">
<svg class="w-5 h-5 md:w-5 md:h-5" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
<rect width="200" height="200" fill="none"></rect>
<path d="M 50 100 A 50 50 0 0 0 150 100" fill="#ED1B25"></path>
<text x="100" y="85" font-family="Arial Black, Arial, sans-serif"
font-size="90" font-weight="bold" text-anchor="middle" fill="#ED1B25" dominant-baseline="middle"> C </text>
</svg>
코담
</a>
{% include "todo/include/header-account.html" %}
</div>
</nav>
</div>
</header>
header-account.html
{% if user.is_authenticated %}
<a href="#" class="px-4 py-2 text-sm font-medium text-neutral-800">
{{ user.username }}님
</a>
<form method="post" action="{% url 'logout' %}" style="display: inline;">
{% csrf_token %}
<button type="submit" class="px-4 py-2 bg-neutral-800 text-sm font-medium text-white rounded-full shadow hover:bg-neutral-900 transition-all">
로그아웃
</button>
</form>
{% else %}
<a href="/signup" class="px-4 py-2 bg-white text-sm font-medium text-neutral-800 border border-neutral-300 rounded-full shadow hover:bg-neutral-100 transition-all">
회원가입
</a>
<a href="/login" class="px-4 py-2 bg-neutral-800 text-sm font-medium text-white rounded-full shadow hover:bg-neutral-900 transition-all">
로그인
</a>
{% endif %}
- 로그인 여부에 따라 버튼 표시 전환
footer.html
<footer class="fixed bottom-4 w-full text-center text-xs text-zinc-400">
© 2025 <a href="https://codam.kr/" target="_blank" class="font-bold text-black">codam.kr</a>. All rights reserved.
</footer>
- 페이지 하단 고정 푸터 디자인
Python 코드 실행기
